<template>
  <div class="beg_house">
    <div class="buy_top">
      <li>
        <van-icon name="arrow-left" @click="back()" />
      </li>
      <li>&emsp;&emsp;房屋求购&emsp;</li>
      <li>
        <van-icon name="ellipsis" />&emsp;
        <van-icon name="more-o" />
      </li>
    </div>
    <div class="beg_top">
      <li>
        房产类型
        <i class="el-icon-caret-bottom"></i>
      </li>
      <li>
        区域选择
        <i class="el-icon-caret-bottom"></i>
      </li>
    </div>
    <div class="beg_menu">
        <ul v-for="(item,idx) in lists" :key="idx">
            <li>
              <p><img :src="item.img1" alt=""><span id="a">{{item.name}}</span><span id="b">{{item.time}}</span></p>
              <p>{{item.word}}</p>
              <p> <span id="c">意向区域:{{item.city}}</span><span id="d"> 意向价格:{{item.price}}.00/月</span><van-icon name="chat" /><van-icon name="phone" /></p>
            </li>
        </ul>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return {
      lists:[]
    }
  },
  created(){
    this.getList()
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    getList(){
      axios({
        url:"/api/lists",
        method:'get'
      }).then(res=>{
        this.lists=res.data.data
      })
    }
  }
}
</script>
<style scoped>
img{
  width: 50px;
  height: 50px;
}
.beg_house {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.buy_top {
  height: 80px;
  background: linear-gradient(45deg, #0f7ef4, #1988f6, #34a0fd);
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
}
.buy_top li:nth-child(1) {
  font-size: 20px;
}
.buy_top li:nth-child(2) {
  font-size: 20px;
}
.buy_top li:nth-child(3) {
  width: 80px;
  height: 30px;
  border-radius: 20px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 32px;
}
.beg_top {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid rgb(73, 73, 73);
}
.beg_top i {
  padding-left: 10px;
  color: gray;
}
.beg_menu{
  flex: 1;
  overflow-y: auto;
  background: rgb(241, 241, 241);
}
.beg_menu ul{
  width: 100%;
  height: 180px;
  background: #fff;
  margin-top: 20px;
  line-height: 40px;
}
.beg_menu img{
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
}
#a{
  font-size: 17px;
}
#b{
  font-size: 14px;
  padding-left: 100px;
}
.beg_menu p:nth-of-type(2){
  display: inline-block;
  width: 90%;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  padding-left: 10px;
  margin-left: 10px;
}
.beg_menu p:nth-of-type(3){
  padding-left: 10px;
}
#c{
  font-size: 14px;
}
#d{
  font-size: 14px;
  padding-left: 20px;
  color: orange;
}
.beg_menu .van-icon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(255, 182, 219);
  color: rgb(247, 48, 147);
  font-size: 20px;
  text-align: center;
  line-height: 30px;
  margin-left: 40px;
  margin-top: 5px;
}
</style>
